<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<span style="font-size:18px;">
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="purchase/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="purchase/css/commonly-used-show.css" />
    <script type="text/javascript" src="purchase/js/jquery.min.js"></script>
    <script type="text/javascript" src="purchase/js/bootstrap.js" ></script>

    <!--  缓存 -->
    <script type="text/javascript" src="purchase/js/jquery.cookie.js"></script>

    <!--  echarts图表生成工具 -->
    <script type="text/javascript" src="purchase/js/echarts.min.js"></script>


    <title>数据图表</title>

</head>

<body class="mybody">

 <jsp:include page="theTopMenuAdmin.jsp" />


 <div id="colum_things" style="width: 90%; height: 600px; margin-top: 100px; margin-left: 50px; margin-right: 50px;"></div>

 <c:if test="${param.type == 1}">
     <div id="colum_things1" style="width: 90%; height: 600px; margin-top: 100px; margin-left: 50px; margin-right: 50px;"></div>
 </c:if>




<script type="text/javascript">
    var userdt = JSON.parse(sessionStorage.getItem("user"));
    if (userdt.result.userName != null){
        $("#usname").text(userdt.result.userName);
    }else {
        $("#usname").text(userdt.result.userLoginName);
    }

    var postUrl = "";

    window.onload = function(){

        if ("${param.type}" === "2"){
            postUrl = "${pageContext.request.contextPath}/member/allSalesRecordList";
        }else{
            postUrl = "${pageContext.request.contextPath}/member/allInboundOutboundList";
        }

        queryAllListInfo();
    }


    function queryAllListInfo(){
        var str = {
            "": ""
        };
        $.ajax({
            type:"post",
            url:postUrl,
            headers: {
                "Content-Type":"application/json"
            },
            data:JSON.stringify(str),
            contentType: "application/json; charset=utf-8",
            dataType:"json",
            success:function(data){
                if (data.status === 0){
                    $("#user_messge").text(data.msg);
                }else {

                    if ("${param.type}" === "1"){
                        repertory(data.result.items);
                    }else if ("${param.type}" === "2"){
                        market(data.result.items);
                    }else if ("${param.type}" === "3"){

                    }

                }

            },
            error:function(xhr,state,errorThrown){
                //alert("发生网络错误，错误码为：" + xhr.status)
                location.href = "${pageContext.request.contextPath}/error";
            }
        });
    }






    function market(myinvento){
        var myArray = new Array();
        var myArray1 = new Array();

        for (var i = 0; i < myinvento.length; i++) {
            myArray.push(myinvento[i].productName);
            myArray1.push(myinvento[i].quantity);
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("colum_things"));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: "商品销量曲线图"
            },
            tooltip: {},
            legend: {
                data:["数量"]
            },
            xAxis: {
                name: "商品名称",
                data: myArray
            },
            yAxis: {
                name: "销售数量",
                type: 'value'
            },
            series: [{
                type: "line",
                data: myArray1,
                symbol: 'circle', //折线点设置为实心点
                symbolSize: 8, //折线点的大小
                itemStyle: {
                    normal: {
                        color: '#f40b05', //改变折线点的颜色
                        lineStyle: {
                            color: '#087ef4' //改变折线颜色
                        }
                    }
                },
                //以下为是否显示，显示位置和显示格式的设置了
                label: {
                    show: true,
                    position: 'top',
                    formatter: '{b}\n{c}'
                }

            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }

    function repertory(myinvento){

        var myArray = new Array();
        var myArray1 = new Array();
        var myArray2 = new Array();

        for (var i = 0; i < myinvento.length; i++) {
            myArray.push(myinvento[i].productType);
            myArray1.push(myinvento[i].quantity);
            myArray2.push(myinvento[i].unitPrice);
        }

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById("colum_things"));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: "商品数量柱状图"
            },
            tooltip: {},
            legend: {
                data:["数量"]
            },
            xAxis: {
                name: "商品类别",
                data: myArray
            },
            yAxis: {
                name: "商品数量"
            },
            series: [{
                type: "bar",
                data: myArray1,
                itemStyle: {
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#e11924','#617bd6','#e6d58a','#f0c09b','#27727B',
                                '#b79e8b','#36ac34','#cb5f92','#264eb3','#60C0DD',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#915755','#97af5b','#bdb12f','#be6446','#26C0C0'
                            ];
                            var index;
                            //给大于颜色数量的柱体添加循环颜色的判断
                            if (params.dataIndex >= colorList.length) {
                                index = params.dataIndex - colorList.length;
                                return colorList[index];
                            }
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',
//                             formatter: '{c}'
                            formatter: '{b}\n{c}'
                        }
                    }
                }

            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


        // 基于准备好的dom，初始化echarts实例
        var myChart1 = echarts.init(document.getElementById("colum_things1"));
        // 指定图表的配置项和数据
        var option1 = {
            title: {
                text: "商品金额柱状图"
            },
            tooltip: {},
            legend: {
                data:["金额"]
            },
            xAxis: {
                name: "商品类别",
                data: myArray
            },
            yAxis: {
                name: "商品金额"
            },
            series: [{
                type: "bar",
                data: myArray2,
                itemStyle: {
                    normal: {
                        //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                        color: function(params) {
                            // build a color map as your need.
                            var colorList = [
                                '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                                '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                                '#b79e8b','#36ac34','#cb5f92','#264eb3','#60C0DD',
                                '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                            ];
                            var index;
                            //给大于颜色数量的柱体添加循环颜色的判断
                            if (params.dataIndex >= colorList.length) {
                                index = params.dataIndex - colorList.length;
                                return colorList[index];
                            }
                            return colorList[params.dataIndex]
                        },
                        //以下为是否显示，显示位置和显示格式的设置了
                        label: {
                            show: true,
                            position: 'top',
//                             formatter: '{c}'
                            formatter: '{b}\n{c}'
                        }
                    }
                }

            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
    }

</script>



</body>
</html>
</span>